<style lang="scss" scoped>
  .body{
    width: 90%;
    padding-left: 3%;
  }
.gongg{
  .el-card__body{
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left{
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right{
      cursor: pointer;
    }
    i{
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini{
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover{
    color: #F56C6C;
  }
}
.conter{
  width: 100%;
  -moz-column-count:4; /* Firefox */
  -webkit-column-count:4; /* Safari 和 Chrome */
  column-count:5;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  margin-top: 2rem;
}
.item{
  margin: 0 0 1em 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}
.item img{
  border-radius: 5px;
  width:100%;
}
</style>
<template>
  <div>
    <div class="body">
      <el-card class="gongg" shadow="never" v-if="info.length>0" style="margin-bottom:20px;">
        <div class="us el-card__body">
          <div class="pull-left">
            最新消息：
          </div>
          <div class="pull-left">
              <i class="el-icon-news"></i>
              <span class="news">{{info[0].conten}}</span>
              <el-tag type="danger" size="mini">new</el-tag>
          </div>
          <div class="pull-right">
            {{getTime(info[0].create_at)}}&nbsp;&nbsp;&nbsp;<i class="el-icon-caret-right"></i>
          </div>
        </div>
      </el-card>

      <el-card class="gongg" shadow="never" v-if="tuwenData.length>0">
        <div class="us el-card__body">
          <div class="pull-left">
            最新图文：
          </div>
          <div class="pull-left">
              <i class="el-icon-news"></i>
              <span class="news">{{tuwenData[0].remark}}</span>
              <el-tag type="danger" size="mini">new</el-tag>
          </div>
          <div class="pull-right">
            {{getTime(tuwenData[0].create_at)}}&nbsp;&nbsp;&nbsp;<i class="el-icon-caret-right"></i>
          </div>
        </div>
      </el-card>

      <el-card class="gongg" shadow="never" style="margin-top:30px;">
        <div class="us el-card__body">
          <h3>banner</h3>
          <div>
            <el-carousel style="text-align:center;">
              <el-carousel-item v-for="n in tableData" :key="n">
                <img :src="n.img"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-card>

      <el-card class="gongg" shadow="never" style="margin-top:30px;">
        <div class="us el-card__body">
          <div>
            <h3 class="pull-left">图文列表</h3>
          </div>
          <div class="conter">
            <div class="item" v-for="(item,index) in tuwenData" :key="index">
              <div @click="goto('/strategyupd?id='+item._id)">
                <img :src="item.banner || ''" />
                <p style="padding-left:12px;padding-right:10px;"><b>{{item.title}}</b></p>
                <div style="padding-left:12px;padding-right:10px;">
                  <p style="text-indent: 25px;">{{item.remark}}</p>
                </div>
                <p style="padding-left:12px;padding-right:10px;">
                  发布时间：<span :style="item.deleted==true?'color:red;':'color:green;'">{{item.deleted==true?'已下架':'已上架'}}</span>
                </p>
                <p style="padding-left:12px;padding-right:10px;color:#999;">
                  状态：{{getTime(item.create_at)}}
                </p>
                <p style="padding-left:12px;padding-right:10px;color:#999;font-size:12px;">
                  <i class="fa fa-eye"></i>{{item.visit_count}} &nbsp;&nbsp;
                  <i class="fa fa-thumbs-up"></i>{{item.collect_count}}  &nbsp;&nbsp;
                  <i class="fa fa-commenting"></i>{{item.reply_count}}
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      
      
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      mainShow: true,
      shopSum: 0,
      tableData: [],
      info: [],

      total: 0,
      page: 1,
      size: 10,
      tuwenData: [],
      form:{
        isMe: null,
        deleted: null,
        author: '',
        tab: null,
        page:1,
        size:10
      }
    };
  },
  computed: {
    
  },
  mounted() {
    this.getData();
    this.getbanner();
  },
  methods: {
    getTime(num) {
      let t = new Date(num);
      return (
        t.getFullYear() + 
        "年" +
        (t.getMonth() + 1) + 
        "月" +
        t.getDate() + 
        "日 "+
        t.getHours() +
        ":" +
        t.getMinutes() +
        ":" +
        t.getSeconds()
      );
    },
    async getbanner(){
      try {
        let res = await this.$http.get('/other/getone',{params:{name:'banner'}});
        if(res.data.data==1){
          this.tableData = res.data.result.array;
        }
      } catch (error) {
          console.log(error)
      }
    },
    async getData(){
      try {
        let result = await this.$http.post("/article/gets", this.form);
        this.tuwenData = result.data.result.result;
        this.total = result.data.result.total;
      } catch (error) {
        console.log(error);
      }
      try {
        let params = { page: 1, size: 1};
        let result = await this.$http.post("/reply/getliuyan", { params });
        this.info = result.data.result.result;
      } catch (error) {
        console.log(error)
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
